<template>
  <AppSearchBar path="/bookEdit" />
  <div class="book-wrapper">
    <SwipeAction
      v-for="(item,index) in listComputed"
      :key="item.id"
      :index="index"
      v-model="showEventRef"
      :show-edit="true"
      @delete="handleDelete(item)"
      @edit="handleEdit(item)"
    >
      <MobileCard
        class="book-card"
        :source="item"
        parent-com="book"
        @click="openPage(item)"
      />
    </SwipeAction>
    <var-dialog
      title="提示"
      message="删除后无法恢复，请确认是否删除！"
      v-model:show="dialogRef"
      @confirm="confirm"
      @cancel="dialogRef = false"
      @closed="dialogRef = false"
    />
  </div>
</template>
<script setup name="BookIndex">
import { ref, inject, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import useSymbols from '../../compostions/useSymbols.js';
import MobileCard from '../../components/MobileCard/index.vue';
import SwipeAction from '../../components/SwipeAction/index.vue';
import { TYPE_NAME_SHU_QIAN } from '../../util/constant';
import AppSearchBar from '../../components/AppSearchBar/index.vue';

const imageBase = import.meta.env.VITE_BASE_FILE_SRC;

const router = useRouter();

const { listRendonly, getList, setVisitItem, delListItem } = inject(useSymbols);

const listComputed = computed(() => {
  return listRendonly.value.map((item) => ({
    ...item,
    screenshot:item.screenshot?imageBase + item.screenshot:'',
  }))
  
})

onMounted(() => {
  getList();
});

const showEventRef = ref(-1);
const idRef = ref();
const dialogRef = ref(false);
const showMsgRef = ref({
  visible: false,
  type: 'success',
});

// 打开窗口
const openPage = ({ url, id }) => {
  setVisitItem(id, TYPE_NAME_SHU_QIAN); // 统计方法
  window.open(url);
};

// 编辑
const handleEdit = ({ id }) => {
  router.push({ path: '/bookEdit', query: { id } });
};

// 显示删除二次确认对话框
const handleDelete = ({ id }) => {
  idRef.value = id;
  dialogRef.value = true;
};

const confirm = async () => {
  try {
    await delListItem(idRef.value);
  } catch (error) {}
};
</script>
<style scoped lang="less">
.book-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 0.5rem;
  box-sizing: border-box;
  padding: 0.5rem;
  width: 100%;
  overflow-x: hidden;
  .book-card {
    border-radius: 0px;
    height: 13rem;
  }
}
</style>
